import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col, Spin, Button, QueueAnim, Modal } from 'antd';
import { WeaForm, WeaSwitch, WeaTableNew } from 'comsMobx';
import {
  WeaErrorPage,
  WeaTools,
  WeaTab,
  WeaFormItem,
  WeaSearchGroup,
  WeaBrowser,
  WeaLocaleProvider,
} from 'ecCom';
import { toJS } from 'mobx';
import * as searchApi from '../../apis/search';

const confirm = Modal.confirm;
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;
@inject('docMonitorStore')

@observer
class MonitorContent extends React.Component {
  constructor(props) {
    super(props);
  }


  componentWillReceiveProps() {
  }
  componentDidMount() {
  }
  shouldComponentUpdate() {
    return true;
  }

  componentWillUnmount() {
  }

  getSearchs() {
    const { docMonitorStore } = this.props;
    let { conditioninfo, form, browser,
    } = docMonitorStore;
    const { isFormInit } = form;
    browser = toJS(browser);
    let group = [];
    isFormInit && toJS(conditioninfo).map((c) => {
      let items = [];
      let isBind = false;
      c.items.map((fields) => {
        let dom;
        if (fields.isQuickSearch) {
          this.quickSearchPara = fields.domkey[0];
        }
        items.push({
          com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fs5qcb@${fields.domkey[0]}`}
            label={`${fields.label}`}
            labelCol={{ span: `${fields.labelcol}` }}
            wrapperCol={{ span: `${fields.fieldcol}` }}
          >
            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@9v0uev@${fields.domkey[0]}`} fieldConfig={fields} form={form} onEnterSearch={() => this.onSearch()} />
          </WeaFormItem>),
          colSpan: 1,
        });
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@n28hfr@${c.title}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />);
    });
    return group;
  }
  onSearch=() => {
    const { docMonitorStore } = this.props;
    const {
      setShowSearchAd, secCategory, form
      , doSearch } = docMonitorStore;
      doSearch({ secCategory, ...form.getFormParams(), operation: docMonitorStore.showBtnKey });
      setShowSearchAd(false);
  }
  getTabButtonsAd() {
    const { docMonitorStore } = this.props;
    const {
      setShowSearchAd, secCategory, form
      , doSearch } = docMonitorStore;
    const btns = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j20dlb@search`} type="primary"
        onClick={() => {
        doSearch({ secCategory, ...form.getFormParams(), operation: docMonitorStore.showBtnKey });
        setShowSearchAd(false);
      }}
      >{getLabel(197, '搜索')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6cnwi7@reset`} type="ghost" onClick={() => form.reset()}>{getLabel(2022, '重置')}</Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xlv0hu@cancel`} type="ghost"
        onClick={() => {
        setShowSearchAd(false);
      }}
      >{getLabel(31129, '取消')}</Button>,
    ];
    return btns;
  }

  doDocDelete(params) {
    const { docMonitorStore } = this.props;
    const { doOperate } = docMonitorStore;
    if (params.operation === 'deleteDoc') {
      searchApi.doDeleteWarm().then((data) => {
        confirm({
          content: (
            <span>
              {data.title}
              {
                data.subTitle ? <span style={{ color: 'red' }}>({data.subTitle})</span> : null
              }
            </span>
          ),
          onOk: () => {
            doOperate(params);
          },
          onCancel() { },
        });
      });
    } else {
      doOperate(params);
    }
  }

  render() {
    const { docMonitorStore } = this.props;
    let {
      comsWeaTableStore, operateType
      , setShowSearchAd, showSearchAd, showBtn
      , setShowBtn, doSearch, secCategory
      , doOperate, form, tabData, clearSelectedTreeKeys, clearSearchValue
      , showBtnKey, setQuickSearchValue, isNormalToActive
      , setIsNormalToActive, isQueueLeaving
      , setIsQueueLeaving, selectedTreeKeys, hasRight
      , setSelectedTreeKeys,
    } = docMonitorStore;
    const selectedRowKeys = comsWeaTableStore.selectedRowKeys;
    return (
      <div>
        <div style={{ position: 'relative' }}>
          {
            hasRight && (
              <div className="tabroute">
                <div className="subroute icon-home">
                    <span className="icon-coms-LargeArea tabicon-home"
                      onClick={() => {
                      clearSelectedTreeKeys();
                    }}
                    />
                </div>
                {
                  toJS(tabData).map((item, index) => {
                    if (index === tabData.length - 1) {
                      return (
                        <div className="subroute tabcontent">
                            <span className="tabtext"
                              onClick={() => {
                              setSelectedTreeKeys(item.domid);
                            }}
                            >{item.name}</span>
                        </div>
                      );
                    }
                      return (
                        <div className="subroute tabcontent">
                            <span className="tabtext"
                              onClick={() => {
                              setSelectedTreeKeys(item.domid);
                            }}
                            >{item.name}</span>
                          <span className="icon-coms-organization-right icon-caretright" />
                        </div>
                      );
                  })
                }
              </div>
            )
          }
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@eftxxc`}
            searchType={['base', 'advanced']}
            searchsAd={this.getSearchs()}
            showSearchAd={showSearchAd}
            buttonsAd={this.getTabButtonsAd()}
            hideSearchAd={() => {
              setShowSearchAd(false);
            }}
            searchsBaseValue={form.getFormParams()[this.quickSearchPara] || ''}
            setShowSearchAd={() => {
              setShowSearchAd(!showSearchAd);
            }}
            onSearch={(value) => {
              doSearch({
                secCategory,
                operation: showBtnKey,
                docsubject: value,
              });
            }}
            onSearchChange={(value) => {
              form.updateFields({ [this.quickSearchPara]: { value } });
              setQuickSearchValue(value);
            }}
          />
        </div>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@et48a7`} className="monitor-todo">
          {
            operateType.map((item, index) => {
              let style = {};
              if (index === 0) style = { borderLeft: '0px solid' };
              else if (index === operateType.length - 1) style = { borderRight: '0px solid' };
              if (showBtn[item.key] === 0) {
                return (
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t5uor1@${item.title}`} span={3}
                    className="monitor-todo-col"
                    key={item.key}
                    onClick={() => {
                         clearSearchValue();
                         setShowBtn(item.key);
                         comsWeaTableStore.setSelectedRowKeys([]);
                         doSearch({ secCategory, operation: item.key });
                         comsWeaTableStore.current = 1;
                       }}
                  >
                    <div className={`${item.icon} monitor-todo-icon`} />
                    <div className="monitor-todo-title" title={item.title}>{item.title}</div>
                  </Col>
                );
              } else if (showBtn[item.key] === 1 && selectedRowKeys.length === 0) {
                return (
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lpxg8l@${item.title}`} span={3}
                    className={isNormalToActive ? 'monitor-todo-col-active' : 'choose-to-active'}
                    key={item.key}
                    style={style}
                  >
                    {
                      isNormalToActive ? (
                        [
                          <div className={`${item.icon} monitor-todo-icon monitor-todo-icon-active`} />,
                          <div>{item.title}</div>,
                        ]
                      ) : (
                        [
                          <div>
                            <span className={`${item.icon} monitor-todo-icon monitor-todo-icon-choose`} />
                            <span className="deltitle">{item.title}</span>
                          </div>,
                          <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@gusxax@${item.title}`} type={'bottom'}>
                            {isQueueLeaving ? null : (
                              <div className="monitor-todo-todo" key="Active">
                                <span className="monitor-text-btn choose-btns">{getLabel(1338, '执行')}</span>
                                <span className="monitor-text-btn">|</span>
                                <span className="monitor-text-btn choose-btns">{getLabel(31129, '取消')}</span>
                              </div>
                            )
                            }
                          </QueueAnim>,
                        ]
                      )
                    }
                  </Col>
                );
              } else if (showBtn[item.key] === 1 && selectedRowKeys.length !== 0) {
                return (
                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jpmmqv@${item.title}`} span={3} className="monitor-todo-col-choose" key={item.key}>
                    <div>
                      <span className={`${item.icon} monitor-todo-icon monitor-todo-icon-choose`} />
                      <span className="deltitle">{item.title}</span>
                    </div>
                    <QueueAnim ecId={`${this && this.props && this.props.ecId || ''}_QueueAnim@i9xztj@${item.title}`} type={'bottom'}>
                      <div className="monitor-todo-todo" key="Choose">
                                <span className="monitor-text-btn choose-btns"
                                  onClick={() => {
                                        this.doDocDelete({ operation: item.key, ids: selectedRowKeys.join() });
                                      }}
                                >{getLabel(1338, '执行')}</span>
                        <span className="monitor-text-btn">|</span>
                        <span className="monitor-text-btn choose-btns"
                          onClick={() => {
                                comsWeaTableStore.setSelectedRowKeys([]);
                                setIsNormalToActive(false);
                                setIsQueueLeaving(true);
                                setTimeout(() => {
                                  setIsNormalToActive(true);
                                }, 500);
                              }}
                        >{getLabel(31129, '取消')}</span>
                      </div>
                    </QueueAnim>
                  </Col>
                );
              }
            })
          }
        </Row>
        <div>
          {
            hasRight && selectedTreeKeys.length === 0 ? (
              <div style={{ textAlign: 'center', paddingTop: '100px' }}>
                <img src="/spa/document/images/selectDirectory.png" />
                <div style={{ color: '#999999' }}>{getLabel(385110, '请选择目录')}</div>
              </div>
            ) : (
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@aer5iw`} spinning={false}>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@92fs9a`}
                  comsWeaTableStore={comsWeaTableStore}
                  hasOrder={true}
                  needScroll={true}
                  showmethod={true}
                  rowSelection={
                    {
                      selectedRowKeys,
                      onChange: (selectedRowKeys, selectedRows) => {
                        if (selectedRowKeys.length === 0) {
                          setIsNormalToActive(false);
                          setIsQueueLeaving(true);
                          setTimeout(() => {
                            setIsNormalToActive(true);
                          }, 500);
                        }
                      },
                    }
                  }
                />
              </Spin>
            )
          }
        </div>
      </div>
    );
  }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@3ecktc`} msg={props.error ? props.error : getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)(MonitorContent);

